<template>
  <div class="dashboard">
    <!-- 欢迎区域 -->
    <div class="hero-section">
      <div class="hero-content">
        <h1 class="hero-title">
          欢迎回来，{{ authStore.user?.nickname || '系统管理员' }}
        </h1>
        <p class="hero-subtitle">
          {{ getCurrentGreeting() }}，今天也要好好记录生活的美好时光
        </p>

        <div class="action-cards">
          <router-link class="action-card upload" to="/media/upload">
            <div class="action-icon">
              <svg fill="none" viewBox="0 0 24 24">
                <path d="M7 10l5-5 5 5M12 5v12" stroke="currentColor" stroke-width="2"/>
              </svg>
            </div>
            <div class="action-content">
              <h3>上传文件</h3>
              <p>添加照片、视频到家庭相册</p>
            </div>
          </router-link>

          <router-link class="action-card diary" to="/diary/write">
            <div class="action-icon">
              <svg fill="none" viewBox="0 0 24 24">
                <path d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" stroke="currentColor" stroke-width="2"/>
              </svg>
            </div>
            <div class="action-content">
              <h3>写日记</h3>
              <p>记录今天的心情和故事</p>
            </div>
          </router-link>

          <router-link class="action-card browse" to="/media">
            <div class="action-icon">
              <svg fill="none" viewBox="0 0 24 24">
                <path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" stroke="currentColor" stroke-width="2"/>
              </svg>
            </div>
            <div class="action-content">
              <h3>浏览媒体</h3>
              <p>查看所有照片和视频</p>
            </div>
          </router-link>
        </div>
      </div>
    </div>

    <!-- 统计面板 -->
    <div class="stats-section">
      <div class="stats-container">
        <div v-for="(stat, index) in stats" :key="stat.title" :class="`stat-${index + 1}`" class="stat-card">
          <div class="stat-header">
            <div class="stat-icon">
              <component :is="stat.icon" />
            </div>
            <div :class="stat.trend" class="stat-trend">
              <span class="trend-icon">
                <svg v-if="stat.trend === 'up'" fill="currentColor" viewBox="0 0 16 16">
                  <path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/>
                </svg>
                <svg v-else-if="stat.trend === 'down'" fill="currentColor" viewBox="0 0 16 16">
                  <path d="m7.247 11.14 4.796-5.481c.566-.647.106-1.659-.753-1.659H2.698a1 1 0 0 0-.753 1.659l4.796 5.48a1 1 0 0 0 1.506 0z"/>
                </svg>
                <svg v-else fill="currentColor" viewBox="0 0 16 16">
                  <path d="M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5A.5.5 0 0 0 8 12z"/>
                </svg>
              </span>
              {{ stat.change }}
            </div>
          </div>
          <div class="stat-body">
            <div class="stat-value">{{ stat.value }}</div>
            <div class="stat-label">{{ stat.title }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-section">
      <div class="content-row">
        <!-- 最近上传 -->
        <div class="content-panel recent-uploads">
          <div class="panel-header">
            <h2 class="panel-title">
              <svg class="title-icon" fill="none" viewBox="0 0 24 24">
                <path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" stroke="currentColor" stroke-width="2"/>
              </svg>
              最近上传
            </h2>
            <router-link class="view-all" to="/media">
              查看全部
              <svg fill="currentColor" viewBox="0 0 16 16">
                <path d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
              </svg>
            </router-link>
          </div>

          <div class="media-grid">
            <div v-for="item in recentMedia" :key="item.id" class="media-card" @click="viewMedia(item)">
              <div class="media-thumbnail">
                <div :class="item.type" class="media-placeholder">
                  <svg v-if="item.type === 'image'" fill="none" viewBox="0 0 24 24">
                    <path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" stroke="currentColor" stroke-width="2"/>
                  </svg>
                  <svg v-else-if="item.type === 'video'" fill="none" viewBox="0 0 24 24">
                    <path d="M23 7l-7 5 7 5V7z" fill="currentColor"/>
                    <rect fill="none" height="14" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="15" x="1" y="5"/>
                  </svg>
                  <svg v-else fill="none" viewBox="0 0 24 24">
                    <path d="M9 18V5l12-2v13M6 15v3M9 5v13" stroke="currentColor" stroke-width="2"/>
                  </svg>
                </div>
                <div :class="item.type" class="media-type-badge">
                  {{ getMediaTypeLabel(item.type) }}
                </div>
              </div>
              <div class="media-info">
                <h4 :title="item.name" class="media-name">{{ item.name }}</h4>
                <div class="media-meta">
                  <span class="media-size">{{ formatFileSize(item.size) }}</span>
                  <span class="media-date">{{ formatDate(item.uploadedAt) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 最近日记 -->
        <div class="content-panel recent-diaries">
          <div class="panel-header">
            <h2 class="panel-title">
              <svg class="title-icon" fill="none" viewBox="0 0 24 24">
                <path d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" stroke="currentColor" stroke-width="2"/>
              </svg>
              最近日记
            </h2>
            <router-link class="view-all" to="/diary">
              查看全部
              <svg fill="currentColor" viewBox="0 0 16 16">
                <path d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
              </svg>
            </router-link>
          </div>

          <div class="diary-list">
            <div v-for="diary in recentDiaries" :key="diary.id" class="diary-card" @click="viewDiary(diary)">
              <div class="diary-header">
                <h4 class="diary-title">{{ diary.title }}</h4>
                <span class="diary-date">{{ formatDate(diary.createdAt) }}</span>
              </div>
              <p class="diary-excerpt">{{ diary.excerpt }}</p>
              <div class="diary-tags">
                <span v-for="tag in diary.tags.slice(0, 3)" :key="tag" class="tag">
                  {{ tag }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 最近活动 -->
      <div class="activity-panel">
        <div class="panel-header">
          <h2 class="panel-title">
            <svg class="title-icon" fill="none" viewBox="0 0 24 24">
              <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke="currentColor" stroke-width="2"/>
            </svg>
            最近活动
          </h2>
          <button class="refresh-btn" @click="refreshActivity">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" stroke="currentColor" stroke-width="2"/>
              <path d="M3 3v5h5M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" stroke="currentColor" stroke-width="2"/>
              <path d="M16 16h5v5" stroke="currentColor" stroke-width="2"/>
            </svg>
          </button>
        </div>

        <div class="activity-timeline">
          <div v-for="activity in activities" :key="activity.id" class="activity-item">
            <div :class="activity.type" class="activity-indicator">
              <div class="activity-dot"></div>
              <div class="activity-pulse"></div>
            </div>
            <div class="activity-content">
              <p class="activity-text">{{ activity.description }}</p>
              <span class="activity-time">{{ formatDate(activity.createdAt) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

const router = useRouter()
const authStore = useAuthStore()

// 图标组件
const MediaIcon = defineComponent({
  template: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" stroke="currentColor" stroke-width="2"/>
  </svg>`
})

const DiaryIcon = defineComponent({
  template: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" stroke="currentColor" stroke-width="2"/>
  </svg>`
})

const StorageIcon = defineComponent({
  template: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" stroke="currentColor" stroke-width="2"/>
  </svg>`
})

const UsersIcon = defineComponent({
  template: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75M13 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0z" stroke="currentColor" stroke-width="2"/>
  </svg>`
})

// 统计数据
const stats = ref([
  {
    title: '媒体文件',
    value: '1,234',
    change: '+12%',
    trend: 'up',
    icon: MediaIcon
  },
  {
    title: '日记篇数',
    value: '89',
    change: '+5%',
    trend: 'up',
    icon: DiaryIcon
  },
  {
    title: '存储使用',
    value: '2.3GB',
    change: '+8%',
    trend: 'up',
    icon: StorageIcon
  },
  {
    title: '家庭成员',
    value: '5',
    change: '0%',
    trend: 'neutral',
    icon: UsersIcon
  }
])

// 最近上传的媒体
const recentMedia = ref([
  {
    id: 1,
    name: '家庭聚餐.jpg',
    type: 'image',
    size: 2048000,
    uploadedAt: new Date('2024-01-20T10:30:00')
  },
  {
    id: 2,
    name: '宝宝第一步.mp4',
    type: 'video',
    size: 15728640,
    uploadedAt: new Date('2024-01-19T15:45:00')
  },
  {
    id: 3,
    name: '生日歌.mp3',
    type: 'audio',
    size: 4194304,
    uploadedAt: new Date('2024-01-18T20:15:00')
  }
])

// 最近日记
const recentDiaries = ref([
  {
    id: 1,
    title: '美好的周末时光',
    excerpt: '今天和家人一起去公园野餐，孩子们玩得很开心，感受到了满满的幸福...',
    tags: ['家庭', '周末', '野餐'],
    createdAt: new Date('2024-01-20T18:00:00')
  },
  {
    id: 2,
    title: '新年新计划',
    excerpt: '新的一年开始了，为自己和家人制定了一些计划和目标...',
    tags: ['新年', '计划', '目标'],
    createdAt: new Date('2024-01-18T09:00:00')
  }
])

// 活动时间线
const activities = ref([
  {
    id: 1,
    type: 'upload',
    description: '上传了 3 张照片到相册"家庭聚餐"',
    createdAt: new Date('2024-01-20T10:30:00')
  },
  {
    id: 2,
    type: 'diary',
    description: '发布了新日记"美好的周末时光"',
    createdAt: new Date('2024-01-20T18:00:00')
  },
  {
    id: 3,
    type: 'family',
    description: '邀请了新成员加入家庭',
    createdAt: new Date('2024-01-19T14:20:00')
  }
])

const getCurrentGreeting = () => {
  const hour = new Date().getHours()
  if (hour < 6) return '夜深了'
  if (hour < 9) return '早上好'
  if (hour < 12) return '上午好'
  if (hour < 14) return '中午好'
  if (hour < 18) return '下午好'
  if (hour < 22) return '晚上好'
  return '夜深了'
}

const getMediaTypeLabel = (type: string) => {
  const labels = {
    image: '图片',
    video: '视频',
    audio: '音频'
  }
  return labels[type] || '文件'
}

const formatFileSize = (bytes: number) => {
  const sizes = ['B', 'KB', 'MB', 'GB']
  if (bytes === 0) return '0 B'
  const i = Math.floor(Math.log(bytes) / Math.log(1024))
  return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i]
}

const formatDate = (date: Date) => {
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))

  if (days === 0) return '今天'
  if (days === 1) return '昨天'
  if (days < 7) return `${days} 天前`

  return date.toLocaleDateString('zh-CN')
}

const viewMedia = (item: any) => {
  router.push(`/media/${item.id}`)
}

const viewDiary = (diary: any) => {
  router.push(`/diary/${diary.id}`)
}

const refreshActivity = () => {
  console.log('Refreshing activity...')
}

onMounted(() => {
  console.log('Dashboard mounted')
})
</script>

<style lang="scss" scoped>
.dashboard {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  padding: 2rem 1rem;

  // Hero Section
  .hero-section {
    max-width: 1200px;
    margin: 0 auto 3rem;
    text-align: center;

    .hero-content {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border-radius: 24px;
      padding: 3rem 2rem;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);

      .hero-title {
        font-size: 2.5rem;
        font-weight: 700;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 0 0 1rem 0;
      }

      .hero-subtitle {
        font-size: 1.1rem;
        color: #64748b;
        margin: 0 0 2.5rem 0;
        line-height: 1.6;
      }

      .action-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
        max-width: 900px;
        margin: 0 auto;

        .action-card {
          display: flex;
          align-items: center;
          gap: 1rem;
          padding: 1.5rem;
          background: white;
          border-radius: 16px;
          text-decoration: none;
          color: inherit;
          transition: all 0.3s ease;
          border: 2px solid transparent;

          &:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
          }

          &.upload {
            &:hover { border-color: #3b82f6; }
            .action-icon { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
          }

          &.diary {
            &:hover { border-color: #10b981; }
            .action-icon { background: linear-gradient(135deg, #10b981, #047857); }
          }

          &.browse {
            &:hover { border-color: #f59e0b; }
            .action-icon { background: linear-gradient(135deg, #f59e0b, #d97706); }
          }

          .action-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;

            svg {
              width: 24px;
              height: 24px;
            }
          }

          .action-content {
            flex: 1;
            text-align: left;

            h3 {
              font-size: 1.1rem;
              font-weight: 600;
              margin: 0 0 0.25rem 0;
              color: #1e293b;
            }

            p {
              font-size: 0.9rem;
              color: #64748b;
              margin: 0;
            }
          }
        }
      }
    }
  }

  // Stats Section
  .stats-section {
    max-width: 1200px;
    margin: 0 auto 3rem;

    .stats-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.5rem;

      .stat-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        border-radius: 20px;
        padding: 2rem;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-4px);
          box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        }

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 4px;
          border-radius: 20px 20px 0 0;
        }

        &.stat-1::before { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
        &.stat-2::before { background: linear-gradient(135deg, #10b981, #047857); }
        &.stat-3::before { background: linear-gradient(135deg, #f59e0b, #d97706); }
        &.stat-4::before { background: linear-gradient(135deg, #ef4444, #dc2626); }

        .stat-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 1.5rem;

          .stat-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #f8fafc, #e2e8f0);

            svg {
              width: 24px;
              height: 24px;
              color: #475569;
            }
          }

          .stat-trend {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;

            .trend-icon {
              width: 12px;
              height: 12px;
            }

            &.up {
              background: #dcfce7;
              color: #16a34a;
            }

            &.down {
              background: #fef2f2;
              color: #dc2626;
            }

            &.neutral {
              background: #f1f5f9;
              color: #64748b;
            }
          }
        }

        .stat-body {
          .stat-value {
            font-size: 2.5rem;
            font-weight: 700;
            color: #1e293b;
            margin: 0 0 0.5rem 0;
          }

          .stat-label {
            font-size: 1rem;
            color: #64748b;
            font-weight: 500;
          }
        }
      }
    }
  }

  // Content Section
  .content-section {
    max-width: 1200px;
    margin: 0 auto;

    .content-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      margin-bottom: 2rem;

      @media (max-width: 768px) {
        grid-template-columns: 1fr;
      }
    }

    .content-panel,
    .activity-panel {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border-radius: 20px;
      padding: 2rem;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

      .panel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;

        .panel-title {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          font-size: 1.25rem;
          font-weight: 600;
          color: #1e293b;
          margin: 0;

          .title-icon {
            width: 20px;
            height: 20px;
            color: #667eea;
          }
        }

        .view-all {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          color: #667eea;
          text-decoration: none;
          font-weight: 500;
          font-size: 0.9rem;
          transition: all 0.2s ease;

          &:hover {
            color: #764ba2;
            transform: translateX(2px);
          }

          svg {
            width: 14px;
            height: 14px;
          }
        }

        .refresh-btn {
          background: none;
          border: none;
          color: #64748b;
          cursor: pointer;
          padding: 0.5rem;
          border-radius: 8px;
          transition: all 0.2s ease;

          &:hover {
            background: #f1f5f9;
            color: #667eea;
          }

          svg {
            width: 18px;
            height: 18px;
          }
        }
      }
    }

    // Media Grid
    .media-grid {
      display: flex;
      flex-direction: column;
      gap: 1rem;

      .media-card {
        display: flex;
        gap: 1rem;
        padding: 1rem;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s ease;

        &:hover {
          background: rgba(102, 126, 234, 0.05);
        }

        .media-thumbnail {
          position: relative;
          width: 60px;
          height: 60px;
          flex-shrink: 0;

          .media-placeholder {
            width: 100%;
            height: 100%;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;

            &.image { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #3b82f6; }
            &.video { background: linear-gradient(135deg, #fef2f2, #fecaca); color: #ef4444; }
            &.audio { background: linear-gradient(135deg, #f3e8ff, #ddd6fe); color: #8b5cf6; }

            svg {
              width: 24px;
              height: 24px;
            }
          }

          .media-type-badge {
            position: absolute;
            top: -4px;
            right: -4px;
            padding: 0.125rem 0.375rem;
            font-size: 0.7rem;
            font-weight: 600;
            border-radius: 8px;
            color: white;

            &.image { background: #3b82f6; }
            &.video { background: #ef4444; }
            &.audio { background: #8b5cf6; }
          }
        }

        .media-info {
          flex: 1;
          min-width: 0;

          .media-name {
            font-size: 0.95rem;
            font-weight: 600;
            color: #1e293b;
            margin: 0 0 0.25rem 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .media-meta {
            display: flex;
            gap: 0.75rem;
            font-size: 0.8rem;
            color: #64748b;

            .media-size::after {
              content: ' • ';
              margin: 0 0.25rem;
            }
          }
        }
      }
    }

    // Diary List
    .diary-list {
      display: flex;
      flex-direction: column;
      gap: 1rem;

      .diary-card {
        padding: 1.25rem;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          border-color: #667eea;
          box-shadow: 0 8px 20px rgba(102, 126, 234, 0.1);
          transform: translateY(-2px);
        }

        .diary-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 0.75rem;

          .diary-title {
            font-size: 1rem;
            font-weight: 600;
            color: #1e293b;
            margin: 0;
          }

          .diary-date {
            font-size: 0.8rem;
            color: #64748b;
            font-weight: 500;
          }
        }

        .diary-excerpt {
          color: #475569;
          font-size: 0.9rem;
          line-height: 1.5;
          margin: 0 0 1rem 0;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .diary-tags {
          display: flex;
          gap: 0.5rem;
          flex-wrap: wrap;

          .tag {
            padding: 0.25rem 0.75rem;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border-radius: 15px;
            font-size: 0.75rem;
            font-weight: 500;
          }
        }
      }
    }

    // Activity Timeline
    .activity-timeline {
      position: relative;

      .activity-item {
        display: flex;
        gap: 1rem;
        padding: 1rem 0;
        position: relative;

        &:not(:last-child)::after {
          content: '';
          position: absolute;
          left: 15px;
          top: 50px;
          width: 2px;
          height: calc(100% - 20px);
          background: linear-gradient(180deg, #e2e8f0, transparent);
        }

        .activity-indicator {
          position: relative;
          width: 30px;
          height: 30px;
          flex-shrink: 0;

          .activity-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
          }

          .activity-pulse {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.3;
            animation: pulse 2s infinite;
          }

          &.upload {
            .activity-dot { background: #3b82f6; }
            .activity-pulse { background: #3b82f6; }
          }

          &.diary {
            .activity-dot { background: #10b981; }
            .activity-pulse { background: #10b981; }
          }

          &.family {
            .activity-dot { background: #f59e0b; }
            .activity-pulse { background: #f59e0b; }
          }
        }

        .activity-content {
          flex: 1;
          padding-top: 0.125rem;

          .activity-text {
            font-size: 0.95rem;
            color: #1e293b;
            margin: 0 0 0.25rem 0;
            font-weight: 500;
          }

          .activity-time {
            font-size: 0.8rem;
            color: #64748b;
          }
        }
      }
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.3;
  }
  70% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

// Responsive Design
@media (max-width: 1200px) {
  .dashboard {
    .hero-section .hero-content .action-cards {
      grid-template-columns: repeat(2, 1fr);
    }

    .stats-section .stats-container {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

@media (max-width: 768px) {
  .dashboard {
    padding: 1rem 0.5rem;

    .hero-section .hero-content {
      padding: 2rem 1.5rem;
      text-align: center;

      .hero-title {
        font-size: 2rem;
        line-height: 1.2;
      }

      .hero-subtitle {
        font-size: 1rem;
      }

      .action-cards {
        grid-template-columns: 1fr;
        gap: 1rem;

        .action-card {
          padding: 1.5rem;

          .card-content .card-title {
            font-size: 1rem;
          }
        }
      }
    }

    .stats-section .stats-container {
      grid-template-columns: 1fr;
      gap: 1rem;

      .stat-card {
        padding: 1.5rem;

        .stat-header .stat-title {
          font-size: 0.9rem;
        }

        .stat-content .stat-number {
          font-size: 1.75rem;
        }
      }
    }

    .content-section {
      .content-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }

      .content-panel,
      .activity-panel {
        padding: 1.5rem;

        .panel-header {
          flex-direction: column;
          gap: 1rem;
          align-items: flex-start;

          .panel-title {
            font-size: 1rem;
          }

          .view-all {
            align-self: flex-end;
          }
        }
      }

      .media-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;

        .media-item {
          .media-overlay .media-title {
            font-size: 0.8rem;
          }
        }
      }

      .diary-grid {
        grid-template-columns: 1fr;

        .diary-item {
          .diary-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
          }

          .diary-tags {
            margin-top: 0.75rem;
          }
        }
      }

      .activity-timeline .activity-item {
        padding: 0.75rem 0;

        &:not(:last-child)::after {
          left: 10px;
          top: 40px;
        }

        .activity-indicator {
          width: 20px;
          height: 20px;

          .activity-pulse {
            width: 20px;
            height: 20px;
          }
        }

        .activity-content {
          .activity-text {
            font-size: 0.9rem;
          }
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .dashboard {
    padding: 0.5rem;

    .hero-section .hero-content {
      padding: 1.5rem 1rem;

      .hero-title {
        font-size: 1.75rem;
      }

      .action-cards .action-card {
        padding: 1.25rem;

        .card-icon {
          width: 40px;
          height: 40px;

          svg {
            width: 20px;
            height: 20px;
          }
        }

        .card-content {
          .card-title {
            font-size: 0.9rem;
          }

          .card-description {
            font-size: 0.8rem;
            line-height: 1.4;
          }
        }
      }
    }

    .stats-section .stats-container .stat-card {
      padding: 1.25rem;

      .stat-content {
        .stat-number {
          font-size: 1.5rem;
        }

        .stat-change {
          font-size: 0.75rem;
        }
      }
    }

    .content-section {
      .content-panel,
      .activity-panel {
        padding: 1.25rem;
      }

      .media-grid {
        grid-template-columns: 1fr;

        .media-item {
          .media-thumbnail {
            height: 200px;
          }
        }
      }
    }
  }
}
</style>
